<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="https://lib.baomitu.com/FileSaver.js/2.0.5/FileSaver.js"></script>
</head>

<body>
    <button onclick="exportImage()">地图下载</button>
    <div id="map">
    </div>
    <script>
        /* mapgis的地图文档下载的时候,也必须添加跨域参数 */
        var docLayer = new Zondy.Map.Doc("", "guanggu", {
            crossOrigin: "Anonymous"
        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        function exportImage() {
            /* postcompose 事件是地图渲染后触发的事件。
            这个事件在每一帧的绘制完成后被触发，可以用于执行一些与地图渲染后相关的操作。 */
            
            // 使用on，只有一移动地图，就会不停地触发下载
            // map.on('postcompose', function (event) {
            map.once('postcompose', function (event) {
                console.log(event)
                const canvas = event.context.canvas
                console.log(canvas)
                canvas.toBlob(function (blob) {
                    console.log(blob)
                    saveAs(blob, 'map.png')
                })
            })
            map.renderSync()// 请求以同步方式立即渲染。
        }
    </script>
</body>

</html>